<template>
	<view class="address-wrap" id="address">
		<!-- 搜索输入框-start -->
		<view class="search-wrap" :style="{top:windowTop+'px'}">
			<view class="searchInfor-input">
				<!--   <text class="iconfont search-icon">&#xe69b;</text> -->
				<uni-icons type="search" size="16" color="#000"></uni-icons>
				<input type="text" confirm-type="search" class="searchInfor-text" @input="searchInputHandle"
					@confirm="searchConfirmHandle" placeholder="输入国内城市/区域查询"/>
			</view>
		</view>
		<view style="height: 32px;"></view>
		<!-- 搜索输入框-end -->
		<template v-if="!isSearch">
			<!-- 城市列表-start -->
			<view class="address-scroll">
				<!-- 当前城市 -->
				<view class="address-currentcity" id="start">
					<view class="address-currentcity-title">当前城市</view>
					<view class="address-currentcity-name">
						<!-- <text class="iconfont">&#xe69f;</text> -->
						<view class="address-currentcity-name-left">
							<uni-icons type="location-filled" size="16" color="#000"></uni-icons>
							<text style="margin-left: 8.5px;" @click="chooseCityHandle({name:currentCity})">{{currentCity}}</text>
						</view>
						<view class="address-currentcity-name-right">
							<text @click="chooseCityHandle(nationwide)">{{nationwide.name}}</text>
						</view>
					</view>
				</view>
				<!-- 热门城市 -->
				<view class="address-popularCities">
					<view class="address-popularCities-title">
						热门城市
					</view>
					<view class="address-popularCities-list">
						<view class="address-popularCities-item" v-for="(item,index) in popularCitiesList" :key="index"
							@click="chooseCityHandle(item)">
							{{item.name}}
						</view>
					</view>
				</view>
				<!-- 选择城市 -->
				<view class="address-choosecity">
					<view class="address-choosecity-title">选择城市</view>
					<view class="address-choosecity-con">
						<template v-for="(item,index) in CityList">
							<view class="address-choosecity-item" :key="index" :id="index">
								<view class="choosecity-item-title">{{index}}</view>
								<template v-for="value in item">
									<view class="choosecity-item-li" :key="value.name" @click="chooseCityHandle(value)">{{value.name}}
									</view>
								</template>
							</view>
						</template>
					</view>
				</view>

			</view>
			<!-- 城市列表-end -->
			<!-- 对应字母 -->
			<view class="address-letter">
				<view class="address-letter-item" @click="scrollHandle('start')">
					<!-- <text class="iconfont">&#xe69f;</text> -->
				</view>
				<template v-for="(item,index) in CityList">
					<view class="address-letter-item" :key="index" @click="scrollHandle(index)">{{index}}</view>
				</template>
			</view>
		</template>
		<!-- 搜索 -->
		<template v-else>
			<view class="search-content">
				<block v-if="searchTotalList.length>0">
					<view class="search-con-item" v-for="(item,index) in searchTotalList" :key="index"
						@click="chooseCityHandle(item)">{{item.name}}</view>
				</block>
				<block v-else>
					<view class="search-total">无结果</view>
				</block>
			</view>
		</template>
	</view>
</template>


<script>
	import city from "./city.js"
	export default {
		data() {
			return {
				nationwide: {
					name: '全国'
				},
				currentCity: '全国', //当前定位城市
				CityList: [], //城市数据
				popularCitiesList: [], //热门城市数据
				windowTop: 0,
				isSearch: false, //是否显示搜索内容，默认：false
				searchTotalList: [], //搜索结果
				searchVal: '',
				SearchList: [], //查询数组
			}
		},
		onShow() {
			//获取手机系统信息
			const systemInfo = uni.getSystemInfoSync();
			console.log("[systemInfo]", systemInfo)
			// #ifdef H5 || APP-PLUS || MP-ALIPAY
			this.windowTop = systemInfo.windowTop
			// #endif
		},
		onLoad() {
			this.dealwithCityData()
			this.getCity()
		},
		methods: {
			// 获取定位
			getLocationSysc() {
				let _this = this;
				return new Promise((resolve, reject) => {
					uni.getLocation({
						type: 'gcj02',
						success: function(res) {
							resolve(res)
						},
						fail: function(err) {
							const defaultLocation = {
								latitude: 0,
								longitude: 0
							};
							resolve(defaultLocation);
						}
					});
				})

			},
			// 获取当前地址并解析
			async getCity() {
				let loc = await this.getLocationSysc();
				let longitude = loc.longitude;
				this.longitude = loc.longitude;
				let latitude = loc.latitude;
				this.latitude = loc.latitude;
				let o = {
					longitude,
					latitude
				};
				let res = await this.$util.getAddress(o);
				let City = res.result.address_component.city
				this.currentCity = City.replace(/省|市|自治区|特别行政区|壮族|回族|维吾尔/g, "")
			},
			// 获取当前城市
			getCurrentCity() {

			},
			// 处理城市数据
			dealwithCityData() {
				let cityList = city.City[0]
				this.popularCitiesList = cityList['热门城市']
				let newCityList = JSON.parse(JSON.stringify(cityList))
				delete newCityList['热门城市']
				this.CityList = newCityList;
				//生成查询数组
				let tempSearchList = [];
				for (let i in this.CityList) {
					for (let j = 0; j < this.CityList[i].length; j++) {
						tempSearchList.push(this.CityList[i][j])
					}
				}
				this.SearchList = tempSearchList;

			},
			//搜索
			searchInputHandle(e) {
				let value = e.detail.value.replace(/\s+/g, "")
				if (value.length > 0) {
					this.isSearch = true
					this.searchHandle(value);
				} else {
					this.isSearch = false
				}

			},
			searchConfirmHandle(e) {
				let value = e.detail.value.replace(/\s+/g, "")
				if (value.length > 0) {
					this.isSearch = true
					this.searchHandle(value);
				} else {
					this.isSearch = false
				}
			},
			searchHandle(keyWord) {
				console.log(JSON.stringify(this.SearchList));
				
				const SearchList = this.SearchList;
				let tempSearchTotal = [];
				SearchList.forEach((value, index) => {
					if (value.name.indexOf(keyWord) != -1) {
						console.log('---------'+JSON.stringify(value));
						tempSearchTotal.push(value)
					}
				})
				
				console.log('----++++++++-----'+JSON.stringify(tempSearchTotal));
				this.searchTotalList = tempSearchTotal;
			},
			//点击字母滚动事件
			scrollHandle(index) {
				const query = uni.createSelectorQuery().in(this);
				uni.createSelectorQuery().select("#address").boundingClientRect(data => {
					uni.createSelectorQuery().select("#" + index).boundingClientRect((res) => {
						uni.pageScrollTo({
							duration: 100,
							scrollTop: res.top - data.top - 12, //滚动到实际距离是元素距离顶部的距离减去最外层盒子的滚动距离
						})
					}).exec()
				}).exec();
			},
			//选择城市
			chooseCityHandle(params) {
				console.log(JSON.stringify(params));
				
				console.log('选择城市', params)
				uni.$emit('getSelectCity', params)
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.address-wrap {
		width: 91.47%;
		margin: 12px auto;
		display: flex;
		flex-direction: column;

		// 搜索输入框
		.search-wrap {
			position: fixed;
			left: 0;
			right: 0;
			z-index: 3;

			.searchInfor-input {
				border-radius: 16px;
				width: 91.47%;
				height: 32px;
				display: flex;
				flex-direction: row;
				background: #eee;
				align-items: center;
				font-size: 14px;
				color: #000;
				margin: auto;
				padding: 0 20rpx;

				.search-icon {
					margin-left: 14.5px;
				}

				.searchInfor-text {
					height: 100%;
					flex: 1;
					margin: 0 16px 0 8px;
					font-weight: 400;
				}
			}
		}

		// 热门城市
		.address-popularCities {
			display: flex;
			flex-direction: column;

			.address-popularCities-title {
				font-size: 15px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
				margin-top: 15.5px;
			}

			.address-popularCities-list {
				display: flex;
				flex-wrap: wrap;

				.address-popularCities-item {
					display: inline-block;
					font-size: 28rpx;
					margin-top: 40rpx;
					margin-right: 20rpx;
					width: 20%;
					padding: 15rpx 0;
					text-align: center;
					border-radius: 12rpx;
					border: 2rpx solid #e4e4e4;

				}
			}
		}

		//城市筛选区
		.address-scroll {
			display: flex;
			flex-direction: column;

			.address-currentcity {
				display: flex;
				flex-direction: column;

				.address-currentcity-title {
					font-size: 15px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-top: 15.5px;
				}

				.address-currentcity-name {
					font-size: 14px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000;
					margin-top: 20px;
					display: flex;
					justify-content: space-between;

					.address-currentcity-name-right {
						margin-right: 98rpx;
					}
				}
			}

			//选择城市
			.address-choosecity {
				display: flex;
				flex-direction: column;

				.address-choosecity-title {
					font-size: 15px;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					margin-top: 15.5px;
				}

				.address-choosecity-con {
					display: flex;
					flex-direction: column;

					.address-choosecity-item {
						display: flex;
						flex-direction: column;

						.choosecity-item-title {
							font-size: 15px;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000;
							margin-top: 18.5px;
						}

						.choosecity-item-li {
							font-size: 14px;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #000;
							margin-top: 22.5px;
						}
					}
				}
			}

		}

		//字母
		.address-letter {
			position: fixed;
			top: 100px;
			right: 17.5px;
			display: flex;
			flex-direction: column;
			z-index: 10;
			font-size: 12px;
			font-family: Source Han Sans CN;
			font-weight: bold;
			color: #000;
			align-items: center;

			.address-letter-item {
				margin-bottom: 3px;
			}
		}

		.search-content {
			display: flex;
			flex-direction: column;
			margin-top: 12px;
			margin-bottom: 12px;

			.search-con-item {
				border-bottom: 1px solid rgba(254, 254, 254, .2);
				height: 35px;
				line-height: 35px;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000;
			}

			.search-total {
				height: 100px;
				display: flex;
				font-size: 14px;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #000;
				justify-content: center;
				align-items: center;
			}
		}
	}
</style>